<template>
  <div class="qh-card" :class="{ 'qh-card--small': type === 'small' }">
    <div class="qh-card__header" :class="{ 'qh-card__header--chart': chart }">
      <slot name="title">
        <div class="title">
          <i v-if="chart" class="iconfont icon-et-line-chart"></i>
          {{ title }}
        </div>
      </slot>

      <div class="f-margin-right">
        <slot name="buttons"></slot>
      </div>
    </div>
    <div class="qh-card__body">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "QhCard",
  props: {
    title: {
      type: String
    },
    type: {
      type: String,
      default: "" // small
    },
    chart: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style lang="scss">
.qh-card {
  background: #fff;
  .qh-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    color: #232425;
    border-bottom: 1px solid #ebeef5;
    .title {
      display: inline;
      line-height: 18px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      border-left: 3px solid #006bff;
      padding-left: 12px;
      margin-left: 10px;
    }
    &.qh-card__header--chart {
      .title {
        padding-left: 0;
        border-left: 0;
        i {
          background: #006bff;
          color: #fff;
          font-size: 12px;
          display: inline-block;
          padding: 2px 2px;
          border-radius: 2px;
          line-height: 12px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }
  }
  .qh-card__body {
    border-top: 1px solid #f0f0f0;
    padding: 15px;
  }
  &#{&}--small {
    .qh-card__body {
      padding: 5px 5px;
    }
  }
}
.TheWidget {
  .qh-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    .qh-card__body {
      flex: 1;
      padding: 0;
      overflow: hidden;
    }
  }
}
</style>
